<!-- 呼吸机 -->
<template>
	<view class="respirator ">
		<button @click="onPath" class="onPath">北京中日友好医院-急诊科</button>
		<view class="con-header">
			<text></text>
			<view>
				<text>1676765343</text>
				<text class="logout">退出登录</text>
			</view>
		</view>
		<!-- <web-view class="Canvas" :webview-styles="webviewStyles" src="http://127.0.0.1:8848/demo/xindiantu.html"></web-view> -->
	
		<view class="respirator-box">
			<view class="respirator-box-con">
				<view class="respirator-header">气源压力低于2.7bar</view>
				<view class="respirator-center">
					<view class="respirator-center-left">
						<view class="respirator-center-item-left">
							<view class="item-left-const"><image class="item-left-img" src="../static/image/yinger@2x.png" mode=""></image></view>
							<view class="item-left-const"><image class="item-left-img" src="../static/image/ertong@2x.png" mode=""></image></view>
							<view class="item-left-const bm0"><image class="item-left-img" src="../static/image/ren@2x.png" mode=""></image></view>
						</view>
						<view class="respirator-center-item-right">
							<view class="item-right-const">
								<view class="item-right-const-deteil">
									<text>Vti</text>
									<text>ml</text>
								</view>
								<view>500</view>
							</view>
							<view class="item-right-const">
								<view class="item-right-const-deteil">
									<text>Fsp</text>
									<text>1/min</text>
								</view>
								<view>12</view>
							</view>
							<view class="item-right-const">
								<view class="item-right-const-deteil">
									<text>Mvi</text>
									<text>L/min</text>
								</view>
								<view>500</view>
							</view>
							<view class="item-right-const bm0">
								<view class="item-right-const-deteil">
									<text>EtCO2</text>
									<text>kpa</text>
								</view>
								<view>500</view>
							</view>
						</view>
					</view>
					<view class="respirator-center-right">
						<!-- <view id="chart"><canvas class="charts" canvas-id="canvasLineA" id="canvasLineA"></canvas></view> -->
						<!-- <canvas class="monitor-left-item-charts" canvas-id="mdc_ecg_elec_potl_i" id="mdc_ecg_elec_potl_i"></canvas> -->
						<div class="monitor-left-item-charts" >
							<iframe src="http://127.0.0.1:8848/demo/xindiantu.html" frameborder="0"></iframe>
						</div>
						<view class="respirator-center-right-bottom">
							<view>
								<text class="respirator-center-right-bottom-test1">FL02</text>
								<text class="respirator-center-right-bottom-test2">80%</text>
							</view>
							<view>
								<text class="respirator-center-right-bottom-test1">Ppeak</text>
								<text class="respirator-center-right-bottom-test2">16 mbar</text>
							</view>
							<view class="br0">
								<text class="respirator-center-right-bottom-test1">Pmean</text>
								<text class="respirator-center-right-bottom-test2">11 mbar</text>
							</view>
						</view>
					</view>
				</view>
				<view class="respirator-footer">
					<view class="">
						<text class="respirator-footer-text1">Vt</text>
						<text class="respirator-footer-text2">500 ml</text>
					</view>
					<view class="">
						<text class="respirator-footer-text1">I:E</text>
						<text class="respirator-footer-text2">1:1.7</text>
					</view>
					<view class="">
						<text class="respirator-footer-text1">Freq</text>
						<text class="respirator-footer-text2">12 min</text>
					</view>
					<view class="br0">
						<text class="respirator-footer-text1">Pmax</text>
						<text class="respirator-footer-text2">11 mbar</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import uCharts from '@/components/u-charts.js';
import ChartTimer from '@/components/chart-timer.js';

export default {
	data() {
		return {
			// 图表相关
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			Interactive: '', //交互显示的数据
			sWidth: {
				width: '100%'
			},
			webviewStyles: {
				progress: {
					color: '#FF3333'
				}
			}
		};
	},
	methods: {
		// 返回
		onPath() {
			uni.redirectTo({
				url: './patientRecord'
			});
		}
	},
	onLoad() {
		// plus.screen.lockOrientation('portrait-primary'); // 锁定方向 纵向
	},
	onReady() {
		var _self = this;
		uni.getSystemInfo({
			success: function(res) {
				if (res.pixelRatio > 1) {
					//正常这里给2就行，如果pixelRatio=3性能会降低一点
					//_self.pixelRatio =res.pixelRatio;
					_self.pixelRatio = 2;
				}
			}
		});
		var chartFun = function(e) {
			e.setWH(100, 100, 900, 200, '#333');
		};

		var charts = {
			mdc_ecg_elec_potl_i: chartFun
		};

		this.chartTimer = new ChartTimer(charts, this)
			.setInterval(80)
			.testData()
			.run();

		console.log(this.chartTimer);
	},
	onShow() {},
	onBackPress(options) {
		// console.log('来了来了');
		uni.redirectTo({
			url: 'pages/consultationList'
		});
	}
};
</script>
<style lang="less" scoped>
.respirator {
	width: 100vw;
	height: 100vh;
}
header {
	width: 100%;
	height: 80px;
	background: rgba(49, 131, 224, 1);
}
.respirator-box {
	width: 100%;
	display: flex;
	justify-content: center;
}
.respirator-box-con {
	border: 1px solid rgba(221, 221, 221, 1);
	width: 1200px;
	height: 662px;
	margin-top: 10vh;
}
.respirator-header {
	height: 73px;
	line-height: 73px;
	border-bottom: 1px solid rgba(221, 221, 221, 1);
	text-align: center;
	box-sizing: border-box;
}
.respirator-center {
	flex: 1;
	display: flex;
}
.respirator-center-left {
	width: 28.4%;
	height: 504px;
	box-sizing: border-box;
	border-right: 1px solid rgba(221, 221, 221, 1);
	display: flex;
}

.respirator-center-item-left {
	width: 30%;
	flex-direction: column;
	display: flex;
	border-right: 1px solid rgba(221, 221, 221, 1);
}

.item-left-const {
	border-bottom: 1px solid rgba(221, 221, 221, 1);
	display: flex;
	flex: 1;
	align-items: center; /*垂直居中*/
	justify-content: center; /*水平居中*/
}
.item-left-const:nth-child(3) {
	border: 0;
}
.item-left-img {
	width: 50px;
	height: 50px;
	// vertical-align: middle;
}

.respirator-center-item-right {
	flex: 1;
	flex-direction: column;
	display: flex;
	align-items: center; /*垂直居中*/
	justify-content: center; /*水平居中*/
}

.item-right-const {
	padding: 5px;
	box-sizing: border-box;
	width: 100%;
	flex: 1;
	border-bottom: 1px solid rgba(221, 221, 221, 1);
}
.item-right-const-deteil {
	display: flex;
	justify-content: space-between;
}
.item-right-const-deteil > text {
	height: 18px;
	font-size: 18px;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}
.item-right-const-deteil + view {
	width: 100%;
	text-align: center;
	margin: 30px 0 0 0;
	font-size: 40px;
	line-height: 40px;
	color: #333;
	font-weight: 700 !important;
}
.respirator-center-right {
	flex: 1;
	display: flex;
	flex-direction: column;
}
#chart {
	width: 100%;
	height: 80%;
	background-color: #ffffff;
}
.respirator-center-right-bottom {
	display: flex;
	height: 20%;
	justify-content: center; /*水平居中*/
	border-top: 1px solid rgba(221, 221, 221, 1);
}
.respirator-center-right-bottom view {
	display: flex;
	border-right: 1px solid rgba(221, 221, 221, 1);
	flex: 1;
	flex-direction: row;
	justify-content: space-around;
	align-items: center; /*垂直居中*/
}

.respirator-center-right-bottom-test1 {
	height: 18px;
	font-size: 18px;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	line-height: 18px;
}
.respirator-center-right-bottom-test2 {
	height: 18px;
	font-size: 18px;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	line-height: 18px;
	font-weight: 700;
}
.respirator-footer {
	display: flex;
	height: 13%;
	border-top: 1px solid rgba(221, 221, 221, 1);
}
.respirator-footer view {
	border-right: 1px solid rgba(221, 221, 221, 1);
	flex: 1;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	align-items: center; /*垂直居中*/
}

.respirator-footer view text:nth-child(1) {
	height: 18px;
	font-size: 18px;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	line-height: 18px;
}
.respirator-footer view text:nth-child(2) {
	height: 18px;
	font-size: 18px;
	font-weight: 700;
	color: rgba(51, 51, 51, 1);
	line-height: 18px;
}
.bm0 {
	border-bottom: 0 !important;
}
.br0 {
	border-right: 0 !important;
}
.monitor-left-item-charts {
	// width: 800px;
	// height: 300px;
	// box-sizing: border-box;
	// margin: 100px 0 0 20px;
	flex: 1;
	display: flex;
	
}

.con-header {
	display: flex;
	justify-content: space-between;
	padding: 0 23.75px 0 150px;
	height: 63px;
	line-height: 63px;
	width: 100%;
	background: rgba(49, 131, 224, 1);
	color: #ffffff;
	font-size: 14px;
	box-sizing: border-box;
}
.logout {
	display: inline-block;
	width: 99.75px;
	height: 30.08px;
	background: rgba(28, 112, 207, 1);
	border-radius: 15.83px;
	vertical-align: middle;
	line-height: 30.08px;
	text-align: center;
	font-size: 11.08px;
	font-weight: 600;
	margin-left: 47.5px;
	&::before {
		content: '';
		position: absolute;
		background: url('../static/image/caozuo_zhuxiao_tuichudenglu@2x.png');
		width: 12.66px;
		height: 13.45px;
		background-size: 100% 100%;
		margin: 8px 0 0 -16px;
	}
}
.onPath {
	width: 230px;
	height: 63px;
	line-height: 63px;
	background: url('../static/image/Fill_1.png') no-repeat;
	background-position-x: 1px;
	background-position-y: 20px;
	position: absolute;
	top: 0px;
	left: 40px;
	color: #ffffff;
	padding: 0;
	border: 0;
	float: left;
}
uni-button:after {
	content: none;
}
uni-button {
	font-size: 14px;
}
iframe {
	// flex: 1;
	width: 100%;
	height: 100%;
	
	
}
#canvas {
	width: 100%;
	height: 100%; 
}
</style>
